
<template>
    <div class="user-container">
        {{ userId }}
        <!-- 问题1: 为什么没有展示子组件 -->
        <!-- 回答：因为在路由配置中不能这样 path: '/user/:id', 应该这样path: '/user'-->
        <div v-if="loading">
            Loading...
        </div>

        <div v-if="error">
            {{ error }}
        </div>

        <div v-if="post">
            <h2>{{ post.title }}</h2>
            <p>{{ post.content }}</p>
        </div>
        <transition>
            <router-view></router-view>
        </transition>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                loading: true,
                post: null,
                error: null,
            }
        },
        watch: {
            $route(to,from) {
                console.log('---$route---');
                console.log('to',to);
                console.log('from',from);
                let toPath = to.path.split('/').length;
                let fromPath = from.path.split('/').length;
                console.log('toPath',toPath);
                console.log('fromPath',fromPath);
            }
        },
        //组件内的守卫
        beforeRouteEnter(to,from,next) {
            console.log('---beforeRouteEnter---');
            //console.log('this',this);
            console.log('to',to);
            console.log('from',from);
            // next(vm=> {
            //     console.log('vm',vm);
            // });
            //next('/foo');
        },
        //为什么改变导航url的时候 并没有刷新页面（好奇怪）
        beforeRouteUpdate(to,from,next) {
            console.log('---beforeRouteUpdate---');
            //console.log('this1',this);
            console.log(to);
            console.log(from);
            //console.log(next);
            //next();
            new Promise((resolve)=> {
                setTimeout(()=> {
                    resolve({ title: '天下',content: '秦扫六合，一统天下'});
                },3000)
            }).then(res=>{
                console.log('res123',res);
                this.loading = false;
                this.post = res;
                this.setData(res);
                next();
            }).catch(err=> {
                console.log('err',err);
            })

        },
        //
        beforeRouteLeave(to,from,next) {
            console.log('---beforeRouteLeave---');
            console.log('this2',this);
            console.log('to',to);
            console.log('from',from);
            //next();
        },
        created() {
            //this.fetchData();
        },
        computed: {
            userId() {
                //console.log('this.$route',this.$route);
                return this.$route.params.id || this.$route.params.userId || this.$route.query.userId;
            }
        },
        methods: {
            fetchData() {
                this.loading = true;
                new Promise((resolve)=> {
                    setTimeout(()=> {
                        resolve({ title: '天下',content: '秦扫六合，一统天下'});
                    },3000)
                }).then(res=>{
                    console.log('res',res);
                    this.post = res;
                }).catch(err=> {
                    console.log('err',err);
                })
            },
            setData(post) {
                this.post = post;
            }
        }
    }
</script>

<style lang="scss" scoped>
    .user-container {

    }
</style>